<template>
  <div class="flowerdetails">
    <!-- 第一个卡片信息 -->
    <!-- 左侧的图片栏 -->
    <div class="ig">
      <!-- <img :src="`http://127.0.0.1:3000/flower_info/${details.pic}`" alt="" /> -->
      <!-- 第二种图片的写法 -->
      <img :src="baseURL + `flower_info/` + details.pic" />
    </div>
    <!-- 下方的信息栏 -->
    <div class="message">
      <!-- 价格 -->
      <span class="jg">￥{{ details.price }}</span>&nbsp;&nbsp;
      <div  class="nr">
        <!-- 标题 -->
        <span>{{ details.title }}</span> &nbsp;
        <!-- 副标题 -->
        <span>{{ details.summary}}</span>
      </div>
      <!-- 已售件数 -->
      <!-- <span>已售{{ details.sold_count }}/件</span> -->
    </div>
  </div>
</template>

<script>
import { mapState } from "vuex";
export default {
  props: ["details"],
  computed: {
    ...mapState(["baseURL"]),
  },
};
</script>

<style  lang="scss" scoped>
* {
  margin: 0;
  padding: 0;
}

.flowerdetails{
  user-select: none;
  background-image: linear-gradient(to right, #e0fff5, #ededff);
  .ig{
    // 给定父元素视口的宽度
      display: flex;
      text-align: center;
      display: block;
      width: 100vw;
    img{
      // 图片撑满父元素
      box-shadow: 2px 2px 2px 2px rgb(190, 201, 255);
      box-sizing: border-box;
      border-radius: 6vw;
      width: 80%;
    }
  }
  .message{
    width: 80%;
    margin: 0 auto;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    padding-top: 5px;
    padding-bottom: 15px;
      display:flex;
      // justify-content: center;
      align-items: center;
    .jg{
      color: red;
      font-weight: bold;
      font-size: 20px;
    }
    .nr{
      color: #4d4d4d;
      font-size: 14px;
      font-weight: bold;

    }
  }

}
</style>